<template>
    <div class="home">
        <!-- <div class="top">
            <div class="flexEnd textWhite">
                <div class="title">重要经济目标防护建设软件管理</div>
                <div class="xx" title="用户"></div>
                <img class="ml10 mt15 cursor" src="@/assets/images/back.png" @click="backLogin" title="退出"/>
            </div>
        </div> -->
        <div class="content">
            <div class="menu">
                <div class="dialogRight">
                    <el-tree
                            accordion
                            class="filter-tree choseTree"
                            :highlight-current='isChecked'
                            node-key="id"
                            ref="tree"
                            :current-node-key="currentNodekey"
                            :default-expanded-keys="expandedkeys"
                            :data="dataTree"
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                    ></el-tree>
                    <!-- <div style="padding:10px 0 10px  50px;font-size: 14px;color:#fff;cursor: pointer" :class="{bgc:!isChecked}"
                        @click="setTableList">报表统计
                    </div> -->
                </div>
            </div>
            <div class="rfdwList">
                <el-breadcrumb separator="/" style="margin: 10px 0 0 20px">
                   <!-- <el-breadcrumb-item>
                        <span @click="backFirst" class="cursor">首页</span>
                    </el-breadcrumb-item>-->
                    <el-breadcrumb-item v-for="(item,index) in breadCrumbArr" :key="index">
                        <span @click="backTreeAndTable(item)" class="cursor">{{item.name}}</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-if="zyjjmbId">
                        <span class="cursor">{{ mbmc }}</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div class="rfdwList_box " v-show="dataFlag">
                    <div class="pt10 pb20">
                        <el-button class="btnDefault mr10" @click="AddData" v-if="categoryId.toString().length==5&&!isNopower()">新增数据</el-button>
                        <el-button class="btnDefault mr10" v-if="!isNopower()" @click="DelectMore">批量删除</el-button>
                    </div>
                    <div class="table" style="height: 100%;overflow-y: auto">
                        <el-table :data="sliceData" border
                                  @selection-change="handleSelectionChange"
                                  row-key="id"
                                  style="width: 100%">
                            <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                            <el-table-column prop="num" label="序号"></el-table-column>
                            <el-table-column prop="name" label="人防单位名称" width="180" >
                                <template slot="header">
                                    <div class="titleDiv">人防单位名称</div>
                                    <el-cascader
                                            :options="data"
                                            :props="{ checkStrictly: true }"
                                            style="width:50px;"
                                            class="noBg"
                                            v-model="value"
                                            @change="elChange"
                                            clearable
                                    ></el-cascader>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mbmc" label="目标名称" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mblx" label="目标类别"></el-table-column>
                            <el-table-column prop="mbjb" label="目标级别"></el-table-column>
                            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="jd" label="经度">
                              <template slot-scope="scope">
                                  {{toHdMSJd(scope.row.jd)}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="wd" label="纬度">
                              <template slot-scope="scope">
                                  {{toHdMSWd(scope.row.wd)}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="mbdw" label="目标单位"></el-table-column>
                            <el-table-column prop label="操作" width="100">
                                <template slot-scope="scope">

                <span
                        @click.prevent="updataStatu(scope.$index, scope.row)"
                        class="normalColor mr10 cursor"
                ><span v-if="isNopower()">查看</span><img src="../../assets/image/sjlr/编辑_on.png" title="编辑" v-if="!isNopower()"/></span>
                                    <span
                                            @click.prevent="DelectRow2(scope.$index, scope.row)" v-if="!isNopower()"
                                            class="normalColor mr10 cursor"
                                    >  <img src="../../assets/image/sjlr/删除_on.png" title="删除"/></span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page mt20">
                            <pages :page="page" @changePage="changepage1"></pages>
                        </div>
                    </div>

                </div>
                <div class="list_box" v-show="!dataFlag">
                    <div class="detailNavigationBar divCss" v-if="tableListFlag">
                        <div
                                class="detail cursor"
                                v-for="(item,index) in detail"
                                @click="detailList(item,index)"
                                :style="{marginLeft:item.level==1?'10px':'35px'}"
                                :class="{bgc:index==num,disable:(item.level==1)||(index!=0 && index!=1 && !zyjjmbId),gray:(index!=0 && index!=1 && !zyjjmbId)}"
                                :key="index"
                        >{{ item.name }}
                        </div>
                    </div>
                    <div class="zyjjmbDetailBox divCss"  v-if="tableListFlag">
                        <router-view @changeNum="changeNum" @fun="zhjgSonzhjg"></router-view>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";

  export default {
    name: "sjsl",
    data() {
      return {
        mbmc: '',
        selectRowArr: [],
        breadCrumbArr: [{ name: "水电气", id: "1" }, { name: "水库", id: "10101" }],
        cevalue: "1",
        ceArr: [{ mc: "第一项", sxvalue: 123 }, { mc: "第二项", sxvalue: null }],
        value: [],
        data: [],
        sliceData: [],
        // checkList: [],
        id: [10101],
        currentNodekey: 10101,
        expandedkeys: [10101],
        isChecked:true,
        dataTree: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        zyjjmbTableShow: true,
        zyjjmbDetailAddShow: false,
        dataFlag: true,
        num: 1,
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        },
        detail: [
          {name: "基本数据", path: "/sjwh/sjsl/jbxx" ,level:1,disabled:true},
          {name: "基本信息", path: "/sjwh/sjsl/jbxx" ,level:2},
          {name: "关键区域", path: "/sjwh/sjsl/gjqy" ,level:2},
          {name: "多媒体信息", path: "/sjwh/sjsl/dmtxx",level:2 },
          {name: "防护建设数据", path: "/sjwh/sjsl/zhjg" ,level:1},
          {name: "指挥机构", path: "/sjwh/sjsl/zhjg",level:2 },
          {name: "专业力量", path: "/sjwh/sjsl/zyll" ,level:2},
          {name: "防护手段", path: "/sjwh/sjsl/fhsd" ,level:2},
          // {name: "物资信息", path: "/sjwh/sjsl/wzxx" },
          // {name: "装备信息", path: "/sjwh/sjsl/zbxx" },
          // {name: "车辆信息", path: "/sjwh/sjsl/clxx" },
          // {name: "防护工程", path: "/sjwh/sjsl/fhgc" },
          {name: "训练演练", path: "/sjwh/sjsl/xlqk" ,level:2},
          // {name: "演习情况", path: "/sjwh/sjsl/yxqk" },
          // {name: "考核情况", path: "/sjwh/sjsl/khqk" },
          {name: "经费来源", path: "/sjwh/sjsl/jfly" },
          {name: "经费支出", path: "/sjwh/sjsl/jfzc",level:2 },
          // {name: "能力评估", path: "/sjwh/sjsl/fspg"}
        ],
        tableNum: "",
        // tableListArr: [
        //   "重要经济目标数量综合统计表",
        //   "专业力量建设累计情况综合统计表",
        //   "单位专业力量年龄、知识结构情况综合统计表",
        //   "防护建设累计情况综合统计表",
        //   "组织指挥建设累计情况综合统计表",
        //   "单位经费年度情况综合统计表",
        //   "单位经费累计情况综合统计表"
        // ],
        tableListFlag: true,
        page: {
          //总条数
          total: 30,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
          //实际返回的条数
          dataLength: 7
        },
        tableData: [],
      };
    },
    mounted() {
      this.TreeData();
      setTimeout(() => {
        this.TreeDataList();
      });
      this.$store.state.zyjjmbId='';
      this.treeList();
    },
    beforeRouteEnter(to, from, next) {
      next(vm => { // 通过 `vm` 访问组件实例
        let data=vm.$route.params
        if(data.type=='zyjjmb'){
          vm.num = 1;
          vm.mbmc = data.row.mbmc;
          vm.$store.state.loadingFlag = true;
          vm.dataFlag = false;
          vm.$store.state.zyjjmbId = data.row.mbid;
          vm.$store.state.categoryId = data.row.categoryid;
          setTimeout(() => {
            vm.$store.state.loadingFlag = false;
          }, 500);
        }
        if(data.type=='gjqy'||data.type=='gjqyDmt'){
          vm.$store.state.loadingFlag = true;
          vm.$store.state.zyjjmbId = data.row.zyjjmbid;
          vm.dataFlag = false;
          vm.num = 2;
          vm.$store.state.detailTypeId = data.row.gjqyid;
          // vm.$router.push('/sjwh/sjsl/gjqy');
          setTimeout(() => {
            vm.$store.state.loadingFlag = false;
          }, 500);
        }
      })
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      TreeRfdwnm() {
        return this.$store.state.TreeRfdwnm;
      },
        categoryId(){
          return this.$store.state.categoryId;
        },
    },
    watch: {
      zyjjmbId() {
      },
      TreeRfdwnm() {
        this.page.limit = 10;
        this.page.currentPage = 1;
        this.TreeDataList();
      }
    },
    methods: {

      changeNum(num) {
        this.num = num;
      },
      detailTable(item) {
        this.tableNum = item;
      },
      backLogin() {
      //let params = {token: localStorage.getItem("token")}
      this.$axios.get("/logout").then(res => {
        if (res.data.result.resultCode == "000000") {
          this.$message({
            type: "success",
            message: "已退出登录!"
          });
          setTimeout(() => {
            this.$router.push("/");
            localStorage.setItem("token", "");
          }, 1000);
        }
      });
    },
      setTableList() {
        //debugger
        this.isChecked = false;
        this.id = '';
        this.expandedkeys = [];
        this.currentNodekey = '';
        this.num = 1;
        this.tableNum = "重要经济目标数量综合统计表";
        this.tableListFlag=false;
        this.dataFlag = false;
      },
      DelectRow(row) {
        baseServe.getDelectList({ zyjjmbID: row.zyjjmbid }).then(() => {
          this.getGjqyTable();
          this.$message({ type: "success", message: "删除成功" });
        });
      },
      DelectSelectRow() {
        let arr = [];
        for (let i = 0; i < this.selectRowArr.length; i++) {
          let target = this.selectRowArr[i].mbid;
          arr.push(target);
        }
        this.DelectRow({ zyjjmbID: arr.join(",") });
      },
      selectionChange(val) {
        this.selectRowArr = val;
      },
      zhjgSon() {
        this.TreeDataList()
        setTimeout(() => {
          this.dataFlag = false;
        }, 500);
      },
      zhjgSonzhjg() {
        this.TreeDataList()
        setTimeout(() => {
          this.dataFlag = true;
        }, 500);
      },

      // /**
      //  * @author fzy
      //  * @desc 报表与基本信息、关键区域显示区分控制
      //  */
      // reportFormShow() {

      // },
      //去掉空子集
      checkChildrenArr(arr){
        arr.map(v => {
          if (v.catagoryInfos&&v.catagoryInfos.length>0) {
            v.catagoryInfos=this.checkChildrenArr(v.catagoryInfos);
          }else{
            delete  v.catagoryInfos
          }
        });
        return arr
      },
      // 树的数据渲染
      TreeData() {
        baseServe.getDetail({}).then(res => {
          // debugger
          res = this.checkChildrenArr(res.data.categoryInfos) ;
          let olddataTree = [];
          res.forEach((item, index) => {
            let temp={      id: item.categoryId,
              label: item.categoryName,}
              if(item.catagoryInfos){
                temp.children=item.catagoryInfos.map((i, j) => {
                  if (i.length !== 0) {
                    let obj = {
                      label: i.categoryName,
                      id: i.categoryId,
                    };
                    if(i.catagoryInfos){
                      obj.children=i.catagoryInfos.map(k => {
                        if (k.length !== 0) {
                          let obj1 = {
                            label: k.categoryName,
                            id: k.categoryId,
                            children: []
                          };
                          return obj1;
                        }
                      })
                    }
                    return obj;
                  }
                })
              }
            olddataTree.push(temp);
          });
          this.dataTree=olddataTree
        });
      },
      //树点击对应的列表数据
      TreeDataList() {
        let params = {
          categoryids: this.id,
          levels: [0, 1, 2, 3],
          rfdwnm: this.TreeRfdwnm
            ? this.TreeRfdwnm
            : localStorage.getItem("rfdwnm")
        };
        baseServe
          .getDetailList(params)
          .then(res => {
            res = res.data.zyjjmbInfos;
            this.tableData = [];
            res.forEach((item, index) => {
              this.tableData.push({
                jd: item.jd,
                wd: item.wd,
                id: item.mbid,
                num: index + 1,
                name: item.rfdwmc,
                mbmc: item.mbmc,
                mblx: item.categorymc,
                mbjb: item.mbdjMc,
                address: item.dz,
                mbdw: item.mbdwmc,
                categoryid:item.categoryid
              });
            });
            this.page.total = this.tableData.length;
            this.page.currentPage=1
          })
          .then(() => {
            this.pages();
          });
      },
      //递归获取树的子集
      getChildren(data, mbArr) {
        if (data.id) {
          mbArr.push(data.id);
        }
        if (data.children) {
          data.children.map(v => {
            mbArr.concat(this.getChildren(v, mbArr));
          });
        }
        return mbArr;
      },
      //递归获取树的父级
      getFatherArr(data, mbArr) {
        if (data.parent) {
          if (!Array.isArray(data.parent.data)) {
            mbArr.unshift({ name: data.data.label, id: data.data.id, ids: this.getChildren(data.data, []) });
            mbArr.concat(this.getFatherArr(data.parent, mbArr));
          } else {
            mbArr.unshift({ name: data.data.label, id: data.data.id, ids: this.getChildren(data.data, []) });
          }
        }
        return mbArr;
      },
      //点击面包屑返回树和表格
      backTreeAndTable(item) {
        this.breadCrumbArr = this.breadCrumbArr.splice(0, this.breadCrumbArr.indexOf(item) + 1);
        this.dataFlag = true;
        this.$refs.tree.setCurrentKey(item.id);
        this.mbmc = ''
        this.id = this.breadCrumbArr[this.breadCrumbArr.length - 1].ids;

        this.TreeDataList();
      },
      //树状的change事件
      handleNodeClick(data, node, list) {
        // this.id[0] = data.id;
        console.log(data.id)
        this.tableListFlag=true;
        this.breadCrumbArr = this.getFatherArr(node, []);
        this.id = this.getChildren(data, []);
        this.$store.state.categoryId = data.id;
        this.$store.state.zyjjmbId = ''
        this.dataFlag = true;
        this.TreeDataList();
        this.isChecked = true;
      },
      //前台分页
      pages() {
        this.page.total = this.tableData.length;
  // debugger
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
        //  this.page.total = Math.ceil(this.tableData.length / this.page.limit);
        // 计算得0时设置为1
        // this.TreeDataList();
      },
      //编辑页面
      updataStatu(index, row) {
        this.mbmc = row.mbmc;
        this.$store.state.loadingFlag = true;
        this.num = 1;
        this.dataFlag = false;
        this.$store.state.zyjjmbId = row.id;
        this.$store.state.categoryId = row.categoryid;
        setTimeout(() => {
          this.$store.state.loadingFlag = false;
        }, 500);
        this.$router.push('/sjwh/sjsl/jbxx');
      },
      //删除数据
      DelectRow2(index, row) {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let params = {
              zyjjmbID: row.id
            };
            baseServe.getDelectList(params).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.selectRowArr=[]
                this.TreeDataList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      //表格数据多选
      handleSelectionChange(val) {
        this.selectRowArr = [];
        val.forEach(item => {
          this.selectRowArr.push(item.id);
        });
      },
      //批量删除
      DelectMore() {
        if(this.selectRowArr.length==0){
          this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
          return
        }else{
          this.$confirm("此操作将批量删除选中项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let params = {
              zyjjmbID: this.selectRowArr.join(",")
            };
            baseServe.getDelectList(params).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.selectRowArr=[]
                this.TreeDataList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        }
      },
      //去除子集
      checkCityChildrenArr(arr){
        arr.map(v => {
          if (v.children&&v.children.length>0) {
            v.children=this.checkCityChildrenArr(v.children);
          }else{
            delete  v.children
          }
        });
        return arr
      },
      //城市选择
      treeList() {
        this.data = [];
        let params = {
          rfdwnm: localStorage.getItem('rfdwnm')
        };
        baseServe.cityList( params ).then(res => {
          res = res.data.qgrfdwModels;
          res.forEach(item => {
            this.data.push({
              label: item.rfdwmc,
              value: item.xh,
              children: item.qgrfdwModels.map(i => {
                let obj = {
                  label: i.rfdwmc,
                  value: i.xh,
                  children: i.qgrfdwModels.map(j => {
                    let obj = {
                      label: j.rfdwmc,
                      value: j.xh
                    };
                    return obj;
                  })
                };
                return obj;
              })
            });
          });
          this.data = this.checkCityChildrenArr(this.data);
        });
      },
      //联动触发事件
      elChange() {
        this.$store.state.TreeRfdwnm = this.value[this.value.length - 1];
        localStorage.setItem("TreeRfdwnmBmy", this.value[this.value.length - 1]);
        this.TreeDataList();
      },
      zyjjmbDetailAddBack() {
        this.zyjjmbDetailAddShow = false;
        this.zyjjmbTableShow = true;
      },
      changeZyjjmbDetailBox() {
        this.zyjjmbDetailAddShow = true;
        this.zyjjmbTableShow = false;
      },
      backFirst() {
        this.dataFlag = true;
        this.$store.state.zyjjmbId = "";
      },
      detailList(item,index) {
        sessionStorage.setItem("sjslChoseName",index)
        this.num = index;
        this.$router.push(item.path);
      },
      // 添加数据
      AddData() {
        this.$store.state.zyjjmbId = "";
        this.num = 1;
        this.$router.push('/sjwh/sjsl/jbxx');
        this.dataFlag = false;
      },
      changepage1(data) {
        this.page = data;
        this.pages();
        // this.userList1();
      }
    },
    components: {
      pages,
    }
  };
</script>
<style lang="less">
    .el-cascader__dropdown {
        background: rgba(30, 60, 72, 0.8);
        border: 1px solid #00ffff;
        .el-cascader-node__label {
            color: #ffffff;
        }
    }

    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
        background: #3ea6a7;
    }

    @import "../../assets/css/global.css";

    /*.dialogRight::-webkit-scrollbar {*/
    /*  display: none;*/
    /*}*/

    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #4d95fd;
        font-weight: bold;
        background-color: transparent;
        box-shadow: 0 0 8px 0px #2bb69f inset;
    }

    .bgc {
        box-shadow: 0 0 8px 0px #2bb69f inset;
        color: white !important;
    }

    .home {
        background-color: #1a303a;
        height: 100%;
        /*width: 100%;*/
        /*position: relative;*/

        .top {
            height: 60px;
            width: 100%;
            background: url("../../assets/images/top.png") no-repeat center center;
            background-size: 100% 100%;

            .flexEnd {
                position: relative;
                padding-right: 7%;

                .mr10 {
                    width: 200px;
                }

                .title {
                    position: absolute;
                    left: 50%;
                    text-align: center;
                    font-size: 30px;
                    color: #c3e2f3;
                    transform: translateX(-50%);
                    top: 0px;
                }
            }

            .xx {
                width: 30px;
                height: 30px;
                background: url("../../assets/images/user.png") no-repeat center center;
            }
        }

        .content {
            width: 100%;
            height: calc(100% - 60px);
            /*overflow: hidden;*/
            display: flex;
            .menu::-webkit-scrollbar {
                width: 4px;
            }

            .menu::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .menu {
                position: absolute;
                margin-top: -18px;
                z-index: 2;
                width: 250px;
                height: calc(100% - 72px);
                overflow-y: auto;
                background-color: #1e3c48;

                .dialogRight {
                    .el-tree-node__content > .el-tree-node__expand-icon {
                        position: absolute;
                        right: 10px;
                    }
                    .el-tree-node__content {
                        height: 50px !important;
                    }

                    .el-tree-node {
                        padding-left: 20px !important;
                        .el-tree-node__content {
                            padding-left: 30px !important;
                        }
                    }
                    // .el-tree-node__children{
                    //      .el-tree-node__content{
                    //   padding-left:70px !important;
                    // }
                    // }
                }
                .el-menu-item:focus,
                .el-menu-item:hover {
                    outline: 0;
                    text-align: center;
                    background-color: #1e3c48 !important;
                    background: url("../../assets/image/菜单栏chose_on.png") no-repeat;
                    background-position: center;
                }

                .el-menu-item {
                    text-align: center;
                }

                .el-submenu__title {
                    text-align: center !important;
                }

                .el-submenu__title:focus,
                .el-submenu__title:hover {
                    outline: 0;
                    background-color: #1e3c48 !important;
                    background: url("../../assets/image/菜单栏chose_on.png") no-repeat;
                    background-position: center;
                }

                .el-submenu__title {
                    padding-left: 30px;
                }
            }

            .rfdwList {
                /*margin-top: 40px;*/
                position: absolute;
                top: 60px;
                left: 250px;
                width: calc(100% - 250px);
                height: calc(100% - 60px);
                .el-breadcrumb__inner {
                    color: #ccc;
                }
                .rfdwList_box {
                    padding: 0 1%;
                    height: calc(100% - 150px);
                    .el-table {
                        .el-table th {
                            padding: 12px 0;
                        }
                        .cell {
                            height: 23px;
                            .titleDiv {
                                line-height: 25px;
                                height: 23px;
                            }
                            .noBg {
                                width: 50px;
                                height: 23px;
                                padding: 0;
                                .el-input {
                                    height: 23px;
                                    padding: 0;
                                }
                                .el-input__icon {
                                    width: 20px;
                                }
                                .el-input--suffix {
                                    height: 35px !important;
                                    .el-input__suffix {
                                        top: -4px;
                                    }
                                    .el-input__inner {
                                        display: none;
                                        height: 23px;
                                    }
                                }
                            }
                        }
                    }
                }
                .list_box {
                    display: flex;
                    margin-top: 20px;
                    padding-right: 10px;
                    height: calc(100% - 95px);
                    .currentHeard {
                        /*padding: 12px 0 12px 20px;*/
                        position: absolute;
                        left: 0;
                        top: 20px;
                        height: 40px;
                        width: 100%;
                        font-family: "Microsoft Yahei-Bold";
                        color: rgba(255, 255, 255, 0.5);
                        font-size: 16px;
                        display: flex;
                        .el-breadcrumb__inner {
                            color: rgba(255, 255, 255, 0.5);
                            font-family: "Microsoft Yahei-Bold";
                            font-size: 16px;
                            height: 40px;
                        }
                        .el-breadcrumb__item {
                            color: rgba(255, 255, 255, 0.5);
                            font-family: "Microsoft Yahei-Bold";
                            font-size: 16px;
                            height: 40px;
                        }
                    }
                    // .detailNavigationBar {
                    //     // order: 1;
                    //     box-sizing: border-box;
                    //     padding: 14px;
                    //     margin-left: 10px;
                    //     width: 200px;
                    //     // height: calc(100% - 60px);
                    //     text-align: center;
                    //     .detail {
                    //         width: 150px;
                    //         margin: 8px 12px 8px 0px;
                    //         font-size: 16px;
                    //         height: 30px;
                    //         line-height: 39px;
                    //         overflow: hidden;
                    //         font-family: "Microsoft Himalaya";
                    //         color: #626c71;
                    //         text-align: center;
                    //         color: #bbbbbb;
                    //         cursor: pointer;
                    //         text-overflow: ellipsis;
                    //         white-space: nowrap;
                    //     }
                    //     .detail:active {
                    //         font-family: "Microsoft Himalaya";
                    //         color: #ffffff;
                    //         // background: url("../../assets/image/二级菜单chose_nor.png")
                    //         //   no-repeat center;
                    //     }
                    // }
                    .zyjjmbDetailBox {
                        box-sizing: border-box;
                        padding:0 20px 20px;
                        margin-left: 10px;
                        height: 100%;
                        width: calc(100% - 203px);
                    }
                    // .redwTable {
                    //   border: 1px solid rgba(5, 230, 230, 0.3);
                    //   border-top: 4px solid #00ffff;
                    //   box-sizing: border-box;
                    //   background-color: #1c3742;
                    //   padding: 50px;
                    //   margin-left: 10px;
                    //   width: calc(100% - 200px);
                    //   // height: calc(100% - 60px);
                    //   .right_one_body {
                    //     background-color: transparent;
                    //     height: 93%;
                    //     width: 100%;
                    //     padding: 0% 1% 2%;
                    //     position: relative;
                    //     box-sizing: border-box;
                    //     // .el-table th {
                    //     //   background-color: #11657d;
                    //     //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
                    //     //   color: white;
                    //     // }
                    //     .el-table__body tr.current-row > td {
                    //       background-color: transparent;
                    //     }

                    //     .page {
                    //       margin-top: 20px;
                    //     }
                    //   }
                    // }
                }
                .currentPath {
                    // order: 2;
                    padding: 15px;
                    // width: 100%;
                    height: 40px;
                }
            }
        }
    }
</style>
